<template>
	<view class="container">
		<scroll-view v-if="rollList.length" scroll-y="true" class="scroll_y" @scrolltolower="scroll">
			<view class="list_item" v-for="item in rollList" :key="item.id">
				<view class="left">
					<text style="font-weight: bold;color: #FA533D;margin-bottom: 10rpx;">${{item.money}}</text>
					<text style="color: #F5F5F5;">限用{{item.used_times}}次</text>
				</view>
				<view class="right">
					<view class="title">{{item.title}}</view>
					<view class="time">有效期至{{effectiveTime(item.end_time*1000)}}</view>
					<view class="buy" @tap="buy_ticket_roll(item)">去購買</view>
				</view>
			</view>
			<view style="text-align: center;margin: 30rpx 0;">已經到底啦~</view>
		</scroll-view>
		<view v-else style="text-align: center;">暫無電子票券</view>
	</view>
</template>

<script>
	import {
		getStoreCouponList
	} from '@/api/index.js'
	export default {
		data() {
			return {
				rollList: [],
				page: 1,
				flag: true,
				store_id: ''
			};
		},
		methods: {
			scroll() {
				if (this.flag) {
					getStoreCouponList({
						type: 2, // 1--優惠券  2--電子票券  3--儲值卡
						page: ++this.page,
						store_id: this.store_id
					}).then(res => {
						console.log(res.data, "電子票卷")
						// this.rollList = res.data
						if (res.data.length) {
							this.rollList = this.rollList.concat(res.data)
						} else {
							this.flag = false
						}
					})
				}
			},
			buy_ticket_roll(item) {
				uni.navigateTo({
					url: `/pages/electronic_ticket_roll/ticket_roll_buy/buy_ticket_roll/buy_ticket_roll?details=${JSON.stringify(item)}`
				})
			},
			effectiveTime(num) {
				let time = new Date(num)
				let y = time.getFullYear()
				let m = time.getMonth() + 1 >= 10 ? time.getMonth() + 1 : "0" + (time.getMonth() + 1)
				let d = time.getDate() >= 10 ? time.getDate() : "0" + (time.getDate())
				return y + "/" + m + "/" + d
			},
		},
		onLoad(option) {
			this.store_id = option.id
			getStoreCouponList({
				type: 2, // 1--優惠券  2--電子票券  3--儲值卡
				page: 1,
				store_id: option.id
			}).then(res => {
				console.log(res.data, "電子票卷")
				this.rollList = res.data
			})
		},
	}
</script>

<style lang="less">
	.container {
		background-color: #F3F5F9;
		min-height: calc(100vh - 90rpx);
		padding: 30rpx;
		box-sizing: border-box;

		.scroll_y {
			height: 90vh;

			// background-color: skyblue;
			.list_item {
				// width: 690rpx;
				height: 159rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				display: flex;
				margin-bottom: 30rpx;

				.left {
					width: 176rpx;
					height: 100%;
					background: #39B19D;
					border-radius: 16rpx 0rpx 0rpx 16rpx;
					opacity: 1;
					// border-right: 1rpx dotted #39B19D;
					font-size: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
				}

				.right {
					flex: 1;
					padding: 28rpx 30rpx 9rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					position: relative;

					.title {
						font-size: 28rpx;
						color: #000;
					}

					.time {
						font-size: 30rpx;
						color: #999;
					}

					.buy {
						width: 101rpx;
						height: 36rpx;
						background: #FFFFFF;
						border-radius: 18rpx 18rpx 18rpx 18rpx;
						opacity: 1;
						border: 1rpx solid #39B19D;
						text-align: center;
						line-height: 36rpx;
						font-size: 24rpx;
						color: #39B19D;
						position: absolute;
						right: 16rpx;
						bottom: 23rpx;
					}
				}
			}
		}
	}
</style>